<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layuiAdmin 网站用户 iframe 框</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/Font-Awesome-master/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/base.css?v={$version}">
    <script src="/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
    <script src="/js/jquery-2.1.1.min.js"></script>
    <style>
        .grid {
            padding: 4px;
        }
        .grid li {
            width: 28px;
            height: 28px;
            line-height: 28px;
            cursor: pointer;
            border: 1px solid #e6e6e6;
            border-top-color: rgb(230, 230, 230);
            border-right-color: rgb(230, 230, 230);
            border-bottom-color: rgb(230, 230, 230);
            border-left-color: rgb(230, 230, 230);
            margin: 4px;
            text-align: center;
            border-radius: 1px;
            -webkit-transition: all .4s ease;
            transition: all .4s ease;
            float: left;
            list-style: none;
        }
        .grid li:hover {
            background: #1E9FFF;
            color: #fff;
            border-color: #1E9FFF;
        }
        .sizing {
            display: none;
            position: absolute;
            left: 0;
            top: 37px;
            width: 100%;
            background: #fff;
            border: 1px solid #D2D2D2;
            border-radius: 0 0 2px 2px;
            box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
            height: 246px;
            overflow: auto;
            z-index: 10;
        }
        .icon_search {
            margin: 8px 8px 0;
        }
        .edui-default .edui-editor{
            z-index: 0 !important;
        }
        .images{
            max-width: 200px;
            max-height: 200px;
        }
        .table,.member{
            margin-left: 10vw;
        }
        .table table td,.member table td{
            text-align: left;
            width: 200px;
            font-size: 12px;
        }
        .page-row{
            margin-bottom: 10px;
        }
        .member img{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 1px solid #d7d7d7;
        }
    </style>
</head>
<body>

<div class="layui-form" style="padding: 20px 0 0 0;">
    <input type="hidden" name="id" value="{$data.id}">
    <div class="layui-form-item page-row ">
        <label class="layui-form-label flex-col-md-3">组建时间</label>
        <div class="layui-input-inline flex-col-md-7">
            <input type="text" disabled value="{$data.create_time}" autocomplete="off"
            class="layui-input">
        </div>
    </div>
    <div class="layui-form-item page-row ">
        <label class="layui-form-label flex-col-md-3">到店时间</label>
        <div class="layui-input-inline flex-col-md-7">
            <input type="text" disabled value="{$data.arrival_time}" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item page-row ">
        <label class="layui-form-label flex-col-md-3">剧本名称</label>
        <div class="layui-input-inline flex-col-md-7">
            <input type="text" disabled value="{$data.script_name}" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="table">
        <table style="border:none;box-shadow: none;">
            <tr>
                <td>{$data.script_num} (建议{if $data.script_m_num > 0}{$data.script_m_num}男{/if}{if $data.script_f_num > 0}{$data.script_f_num}女{/if})</td>
                <td>难度：{$data.script_difficulty}</td>
            </tr>
            <tr>
                <td>价格：{$data.script_price}/位</td>
                <td>剧本形式：{$data.script_xs}</td>
            </tr>
            <tr>
                <td>单局时长：{$data.script_time}分钟</td>
                <td>类型：{$data.script_tags}</td>
            </tr>
        </table>
    </div>
    <div style="margin-left: 10vw;line-height: 60px;">
        {if $data.status == 1}
        等待其他人加入
        {elseif $data.status == 2 || $data.status == 3 || $data.status == 4}
        预约人以齐
        {/if}
    </div>
    <div style="margin-left: 10vw;">
        {$data.script_num}&nbsp&nbsp&nbsp已有{$data.min}人参与 {if $data.status == 1}还差{$data.max-$data.min}人{elseif $data.status == 2 || $data.status == 3 || $data.status == 4}人数已满{/if}
    </div>
    <div class="member">
        <table style="border:none;box-shadow: none;margin-top: 20px;">
            {foreach $data.order_member as $k=>$v}
            <tr>
                {if $v.user_type == 1}
                <td><img src="{$v.user_index.image?:$v.user_index.img}" alt=""></td>
                {elseif $v.user_type == 2}
                <td><img src="{$v.business.image}" alt=""></td>
                {else}
                <td><img src="{$v.virtual_characters.image}" alt=""></td>
                {/if}
                {if $v.user_type == 1}
                <td>{$v.user_index.nickname}</td>
                {elseif $v.user_type == 2}
                <td>{$v.business.nickname}</td>
                {else}
                <td>{$v.virtual_characters.name}</td>
                {/if}
                {if $v.user_type == 1}
                <td>联系电话：{$v.user_index.tel}</td>
                {elseif $v.user_type == 2}
                <td>联系电话：{$v.business.tel}</td>
                {else}
                <td>虚拟人物</td>
                {/if}
            </tr>
            {/foreach}
        </table>
    </div>
    <div class="layui-form-item page-row" style="margin-top: 20px;margin-bottom: 50px;">
        <label class="layui-form-label flex-col-md-3">当前状态</label>
        <div class="layui-input-inline flex-col-md-7">
            <input type="text" disabled value="{$data.status_name}" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item  layui-hide">
        <input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
    </div>
</div>
<script>
    window.onunload = function (params) {
        if (window.history && window.history.pushState) {
            $(window).on('popstate', function () {
                window.history.pushState('forward', null, '#');
                //window.location.href="ad.html";   // 回退时跳转到新页面
                window.history.forward(1);
                alert("不可回退");
            });
        }

        window.history.pushState('forward', null, '#'); //在IE中必须得有这两行
        window.history.forward(1);
    }
</script>
<script>
    layui.config({
        base: '/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'upload','layer','layedit'], function () {
        var $ = layui.$
            , form = layui.form
            , upload = layui.upload
            , layedit = layui.layedit;

        //自定义验证
        form.verify({
            nickname: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
            }
            ,number_t:function(value, item){
                if(value > 30 || value <5){
                    return '不能大于30，小于5';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]

            //确认密码
            ,repass: function(value){
                if(value !== $('#LAY_password').val()){
                    return '两次密码输入不一致';
                }
            }
        });
        $('body').on('keyup', '.icon_search_input', function(){
            var keyword  = $.trim($(this).val());
            if (!keyword) {
                $(this).closest('.icon_select_options').find('li').show();
            } else {
                $(this).closest('.icon_select_options').find('li').each(function(){
                    var className = $(this).find('i').attr('class');
                    if (className.indexOf(keyword) >=0) {
                        $(this).show()
                    } else {
                        $(this).hide()
                    }
                })
            }
        })

    })
</script>
<script>

</script>
</body>
</html>